<template>
  <d2-container>
    <div>
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName" header-align="center"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="user"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="邀请明细">
          <template slot-scope="scope">
            <el-button type="primary" @click="ageninfos(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="first_use"
          label="制定等级">
          <template slot-scope="scope">
            <el-select @change="Freeze_vips(scope.row)" v-model="scope.row.first_use" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.user"
                :value="item.user">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="制定抖音价格">
          <template slot-scope="scope">
            <el-button type="warning" @click="look_price(scope.row)">制定抖音价格</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="制定淘宝价格">
          <template slot-scope="scope">
            <el-button type="warning" @click="look_price_taobao(scope.row)">制定淘宝价格</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="冻结与否">
          <template slot-scope="scope">
            <el-button type="danger" v-show="scope.row.status == 2" @click="freeze_cooperations(scope.row,1)">冻结</el-button>
            <el-button type="success" v-show="scope.row.status == 1" @click="freeze_cooperations(scope.row,2)">正常</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.create_time*1000 | moment}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
      <!--    商家信息-->
      <el-dialog
        title="商家信息"
        width="50%"
        :visible.sync="dialogVisible">
        <div style="display:flex;justify-content: space-around">
          <span>邀请商家总提成:{{ruleForm.deduct == 0 ? 0:ruleForm.deduct}}</span>
          <span>邀请商家总消费:{{ruleForm.cost==0 ? 0:ruleForm.cost}}</span>
          <span>邀请商家总任务:{{ruleForm.task == 0 ? 0:ruleForm.task}}</span>
        </div>
        <el-table
          :data="babyinfo"
          border
          style="width: 100%">
          <el-table-column
            prop="babyinfo"
            label="宝贝ID">
          </el-table-column>
          <el-table-column
            prop="count"
            label="邀请商家任务总数">
          </el-table-column>
          <el-table-column
            prop="price"
            label="邀请商家任务本金">
          </el-table-column>
          <el-table-column
            prop="shopname"
            label="邀请商家任务店铺">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
      <!--    制定价格-->
      <el-dialog
        title="制定抖音价格"
        width="50%"
        :visible.sync="dialog">
        <el-form :model="list" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div style="display:flex;">
            <div>
              <el-form-item label="0 - 20">
                <el-input v-model.number="list[0]" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="20.1 - 50">
                <el-input v-model.number="list[1]" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="50.1 - 100">
                <el-input v-model.number="list[2]"></el-input>
              </el-form-item>
              <el-form-item label="100.1 - 150">
                <el-input v-model.number="list[3]"></el-input>
              </el-form-item>
              <el-form-item label="150.1 - 200">
                <el-input v-model.number="list[4]"></el-input>
              </el-form-item>
              <el-form-item label="200.1 - 250">
                <el-input v-model.number="list[5]"></el-input>
              </el-form-item>
              <el-form-item label="250.1 - 300">
                <el-input v-model.number="list[6]"></el-input>
              </el-form-item>
              <el-form-item label="300.1 - 350">
                <el-input v-model.number="list[7]"></el-input>
              </el-form-item>
              <el-form-item label="350.1 - 400">
                <el-input v-model.number="list[8]"></el-input>
              </el-form-item>
              <el-form-item label="400.1-450">
                <el-input v-model.number="list[9]"></el-input>
              </el-form-item>
              <el-form-item label="450.1-500">
                <el-input v-model.number="list[10]"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="500.1-550">
                <el-input v-model.number="list[11]"></el-input>
              </el-form-item>
              <el-form-item label="550.1-600">
                <el-input v-model.number="list[12]"></el-input>
              </el-form-item>
              <el-form-item label="600.1-650">
                <el-input v-model.number="list[13]"></el-input>
              </el-form-item>
              <el-form-item label="700.1-750">
                <el-input v-model.number="list[14]"></el-input>
              </el-form-item>
              <el-form-item label="750.1-800">
                <el-input v-model.number="list[15]"></el-input>
              </el-form-item>
              <el-form-item label="800.1-850">
                <el-input v-model.number="list[16]"></el-input>
              </el-form-item>
              <el-form-item label="850.1-900">
                <el-input v-model.number="list[17]"></el-input>
              </el-form-item>
              <el-form-item label="900.1-950">
                <el-input v-model.number="list[18]"></el-input>
              </el-form-item>
              <el-form-item label="950.1-1000">
                <el-input v-model.number="list[19]"></el-input>
              </el-form-item>
              <el-form-item label="1000以上">
                <el-input v-model.number="list[20]"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="make_price()">确 定</el-button>
      </span>
      </el-dialog>
      <el-dialog
        title="制定淘宝价格"
        width="50%"
        :visible.sync="dialog_taobao">
        <el-form :model="list_taobao" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div style="display:flex;">
            <div>
              <el-form-item label="0 - 20">
                <el-input v-model.number="list_taobao[0]" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="20.1 - 50">
                <el-input v-model.number="list_taobao[1]" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="50.1 - 100">
                <el-input v-model.number="list_taobao[2]"></el-input>
              </el-form-item>
              <el-form-item label="100.1 - 150">
                <el-input v-model.number="list_taobao[3]"></el-input>
              </el-form-item>
              <el-form-item label="150.1 - 200">
                <el-input v-model.number="list_taobao[4]"></el-input>
              </el-form-item>
              <el-form-item label="200.1 - 250">
                <el-input v-model.number="list_taobao[5]"></el-input>
              </el-form-item>
              <el-form-item label="250.1 - 300">
                <el-input v-model.number="list_taobao[6]"></el-input>
              </el-form-item>
              <el-form-item label="300.1 - 350">
                <el-input v-model.number="list_taobao[7]"></el-input>
              </el-form-item>
              <el-form-item label="350.1 - 400">
                <el-input v-model.number="list_taobao[8]"></el-input>
              </el-form-item>
              <el-form-item label="400.1-450">
                <el-input v-model.number="list_taobao[9]"></el-input>
              </el-form-item>
              <el-form-item label="450.1-500">
                <el-input v-model.number="list_taobao[10]"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="500.1-550">
                <el-input v-model.number="list_taobao[11]"></el-input>
              </el-form-item>
              <el-form-item label="550.1-600">
                <el-input v-model.number="list_taobao[12]"></el-input>
              </el-form-item>
              <el-form-item label="600.1-650">
                <el-input v-model.number="list_taobao[13]"></el-input>
              </el-form-item>
              <el-form-item label="700.1-750">
                <el-input v-model.number="list_taobao[14]"></el-input>
              </el-form-item>
              <el-form-item label="750.1-800">
                <el-input v-model.number="list_taobao[15]"></el-input>
              </el-form-item>
              <el-form-item label="800.1-850">
                <el-input v-model.number="list_taobao[16]"></el-input>
              </el-form-item>
              <el-form-item label="850.1-900">
                <el-input v-model.number="list_taobao[17]"></el-input>
              </el-form-item>
              <el-form-item label="900.1-950">
                <el-input v-model.number="list_taobao[18]"></el-input>
              </el-form-item>
              <el-form-item label="950.1-1000">
                <el-input v-model.number="list_taobao[19]"></el-input>
              </el-form-item>
              <el-form-item label="1000以上">
                <el-input v-model.number="list_taobao[20]"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog_taobao = false">取消</el-button>
        <el-button type="primary" @click="make_price_taobao()">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {agenlist_One,ageninfo,agenget_priceo,vip_price_list,dy_agent_price,Freeze_vip,freeze_cooperation,agent_price} from '@/api/api'
  export default {
    name: "List-Agents",
    data() {
      return {
        tableData: [],
        ruleForm: {
          num:"",
          money:"",
          shop:"",
          deduct:"",
          cost:"",
          task:""
        },
        value1:null,
        options: [],
        value: '',
        list:[],
        list_taobao:[],
        dialog_taobao:false,
        page: 1,
        dialogVisible:false,
        dialog:false,
        total:null,
        babyinfo:null,
        cooperation_name:null
      }
    },
    methods: {
      freeze_cooperations(row,id){
        let params = {
          proxy_id:row.id,
          types:id
        }
        freeze_cooperation(params).then((res)=>{
          console.log(res);
          this.agenlists()
        })
      },
      Freeze_vips(row){
        if(row.first_use == '超级会员'){
          this.value = 1
        }else if(row.first_use == '特级会员'){
          this.value = 2
        }else if(row.first_use == '高级会员'){
          this.value = 3
        }else if(row.first_use == '会员'){
          this.value = 4
        }
        let params = {
          proxy_id:row.id,
          types:this.value,
        }
        Freeze_vip(params).then((res)=>{
          console.log(res);
          this.agenlists()
        })
      },
      vip_price_lists(){
        vip_price_list().then(res=> {
          console.log(res.Data);
          this.options = res.Data.map((item)=>{
            if(item.user == "vip-1"){
              item.user = "超级会员"
            }else if(item.user == "vip-2"){
              item.user = "特级会员"
            }else if(item.user == "vip-3"){
              item.user = "高级会员"
            }else if(item.user == "vip-4"){
              item.user = "会员"
            }
            return item
          })
          console.log(this.options);
        })
      },
      look_price_taobao(row){
        this.dialog_taobao = true
        this.cooperation_name = row.user
        let params = {
          userinfo:row.user
        }
        agenget_priceo(params).then((res)=>{
          this.list_taobao = res.Data.info
        })
      },
      look_price(row){
        this.dialog = true
        this.cooperation_name = row.user
        let params = {
          userinfo:row.user
        }
        agenget_priceo(params).then((res)=>{
          this.list = res.Data.dy_price
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 == 1) {
          return 'warning-row';
        } else{
          return 'success-row';
        }
        return '';
      },
      make_price_taobao(){
        let pramas = {
          cooperation_name:this.cooperation_name,
          Prices:JSON.stringify(this.list_taobao)
        }
        agent_price(pramas).then((res)=>{
          if(res.Status == 200){
            this.$message({
              type:'success',
              message:res.Message
            })
            this.dialog_taobao = false
            this.agenlists()
          }else{
            this.$message({
              type:'error',
              message:res.Message
            })
          }
        })
      },
      //制定价格
      make_price(){
        let pramas = {
          cooperation_name:this.cooperation_name,
          Prices:JSON.stringify(this.list)
        }
        dy_agent_price(pramas).then((res)=>{
          if(res.Status == 200){
            this.$message({
              type:'success',
              message:res.Message
            })
            this.dialog = false
            this.agenlists()
          }else{
            this.$message({
              type:'error',
              message:res.Message
            })
          }
        })
      },
      ageninfos(row){
        let param = {
          admin_id:row.id
        }
        ageninfo(param).then((res)=>{
          if(res.Status == 200){
            this.dialogVisible = true;
            let babyinfo
            babyinfo = Object.entries(res.Data.babyinfo).map((item)=>{
              item.shift()
              return item
            })
            this.babyinfo = babyinfo.flat()
            this.ruleForm.commission = res.Data.commission
            this.ruleForm.cost = res.Data.consumption
            this.ruleForm.task = res.Data.task_count
          }else{
            this.$message({
              type:'error',
              message:res.Message
            })
          }
        })
      },
      handleCurrentChange(val) {
        this.page = val
        this.agenlists()
      },
      agenlists() {
        let params = {
          page: this.page,
          pagesize: 10
        }
        agenlist_One(params).then((res) => {
          if(res.Status == 200){
            this.tableData = res.Data.map((item)=>{
              let arr = ['','超级会员','特级会员','高级会员','会员']
              return {id:item.id,user:item.user,status:item.status,first_use:arr[item.first_use],create_time:item.create_time}
            })
            console.log(this.tableData);
            this.total = res.Data.task_count
          }else{
            this.$message({
              type:'error',
              message:res.Message
            })
          }
        })
      }
    },
    created() {
      this.agenlists()
      this.vip_price_lists()
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
